<script setup lang="ts">
import {message} from "ant-design-vue";
import {useRequest} from "vue-hooks-plus/es";
import {postCurriculumGetLearningCurriculum} from "@/apis/student";
import {ref} from "vue";


const pagination = {
  onChange: (page: number) => {
    console.log(page);
  },
  pageSize: 5,
  hideOnSinglePage: true
};
const listData: Record<string, string>[] = [];

for (let i = 0; i < 23; i++) {
  listData.push({
    href: 'https://www.antdv.com/',
    title: `ant design vue part ${i}`,
    avatar: 'https://joeschmoe.io/api/v1/random',
    description:
        'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  });
}
const bodyStyle = {
  padding: '0.56rem'
}

// 获取正在进行学习的课程
let curriculumDataList = ref<any>([]);
const {
  loading
} = useRequest(()=>postCurriculumGetLearningCurriculum({
  pageNum: 1,
  pageSize: 10
}),{
  onSuccess: ((res) => {
    curriculumDataList.value = res.data.list;
    console.log(curriculumDataList.value)
  })
})

const handelClickToLearn = () => {
  message.success("跳转学习页面",1)
}
</script>

<template>
  <a-list item-layout="vertical" size="middle" :split="false" :pagination="pagination" :data-source="curriculumDataList" :loading="loading">
      <template #renderItem="{ item }">
        <a-list-item >
          <a-card hoverable :body-style="bodyStyle"  class="card">
            <a-flex justify="space-between" align="center">
              <a-flex>
                <a-image
                    :preview="false"
                    :width="50"
                    :src=item.curriculumCover
                />
                <div style="margin-left: 2rem">
                  <h3>{{ item.curriculumName }}</h3>
                  <a-space>
                    <a-tag color="#91DDCF">类型：{{ item.curriculumType }}</a-tag>
                    <a-tag color="#D8EFD3">节数：{{ item.curriculumNode }}</a-tag>
                  </a-space>
                </div>
              </a-flex>
              <router-link :to="{path:'/read/',query:{type:'curriculum',id:item.id}}">
                <a-button type="primary" @click="handelClickToLearn">进行学习</a-button>
              </router-link>
            </a-flex>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
</template>

<style scoped lang="scss">
.card{
  width: 100%;
  margin-bottom: .72rem;

}
</style>
